<template>
	<view class="container">

		<view class="view-box" :style="{ height: height + 'px', background: bgcolor }">

			<text class="view" :style="{ paddingTop: top + 'px',color:opcity >=  1 ? '#fff' : '#fff'}">优选好品</text>
			<view class="view-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" @tap="back">
					<tui-icon name="arrowleft" :size="30" :color="opcity >= 1 ? '#fff' : '#fff'"></tui-icon>
				</view>
			</view>
		</view>
		<view class="tui-header-banner">
			<view class="tui-banner-bg">
				<view class="tui-banner-box">
					<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150"
						class="tui-banner-swiper" :circular="true" indicator-color="rgba(255, 255, 255, 0.8)"
						indicator-active-color="#fff">
						<swiper-item v-for="(item, index) in banner" :key="index" @tap="curls(item.adv_url)">
							<image :src="item.adv_image" class="tui-slide-image" mode="widthFix" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<liu-goods-swiper :goodsList="cateList" :imgWidth="50" :imgHeight="50" :indexs="indexs" @clickItem="clickItem"
			@indexs="getIndex" ref="goodsSwiper"></liu-goods-swiper>
		<view class="tui-mtop">
			<!-- <image src="../../static/images/common/hots.png" mode="widthFix" class="yui-hots-img"></image> -->
			<view class="yui-hot-title">
				<view class="yui-hot-title-left">力荐排行榜</view>
				<view class="yui-hot-title-right"> 跟着买 就对了</view>
			</view>
		</view>
		<tui-sticky :scrollTop="scrollTop" stickyHeight="0rpx" :stickyTop="topHeight">
			<template v-slot:header>
				<view class="view-screen" :style="{ top: height + 'px' }">
					<view class="tui-screen-top">
						<view class="tui-top-item" :class="[tabIndex == 0 ? 'tui-active tui-bold' : '']" data-index="0"
							@tap="screen">热度</view>
						<view class="tui-top-item tui-icon-ml" :class="[tabIndex == 1 ? 'tui-active tui-bold' : '']"
							data-index="1" @tap="screen">
							<view>{{ selectedName }}</view>
							<tui-icon :name="selectH > 0 ? 'arrowup' : 'arrowdown'" :size="14"
								:color="tabIndex == 1 ? '#e41f19' : '#444'"></tui-icon>
						</view>
						<view class="tui-top-item" :class="[tabIndex ==2 ? 'tui-active tui-bold' : '']" @tap="screen"
							data-index="2">销量</view>

						<!-- <view class="tui-top-item tui-icon-ml" @tap="screen" data-index="3">
							<text>筛选</text>
							<tui-icon name="screen" :size="12" color="#333" :bold="true"></tui-icon>
						</view> -->

						<!--下拉选择列表--综合-->
						<view class="tui-dropdownlist" :class="[selectH > 0 ? 'tui-dropdownlist-show' : '']"
							:style="{ height: selectH + 'rpx' }">
							<view class="tui-dropdownlist-item tui-icon-middle"
								:class="[item.selected ? 'tui-bold' : '']" v-for="(item, index) in dropdownList"
								:key="index" @tap.stop="dropdownItem" :data-index="index">
								<text class="tui-ml tui-middle">{{ item.name }}</text>
								<tui-icon name="check" :size="16" color="#e41f19" :bold="true"
									v-if="item.selected"></tui-icon>
							</view>
						</view>
						<view class="tui-dropdownlist-mask" :class="[selectH > 0 ? 'tui-mask-show' : '']"
							@tap.stop="hideDropdownList"></view>
						<!--下拉选择列表--综合-->
					</view>
				</view>
			</template>
			<template v-slot:content>
				<view class="tui-product-box">
					<view class="tui-product-list">

						<view class="tui-product-container">
							<block v-for="(item, index) in productList" :key="index">
								<view class="tui-pro-item tui-flex-list" @tap="detail(item.goods_id)">
									<view class="tui-pro-top">
										<text class="tui-pro-top-number">
											{{index+1}}
										</text>
										<image src="/static/images/common/mlevel.png" mode="widthFix" class="tui-pro-top-img" v-if="index==0"></image>
										<image src="/static/images/common/mlevel.png" mode="widthFix" class="tui-pro-top-img" v-else-if="index==1"></image>
										<image src="/static/images/common/m2.png" mode="widthFix" class="tui-pro-top-img" v-else-if="index==2"></image>
										<image src="/static/images/common/m4.png" mode="widthFix" class="tui-pro-top-img" v-else></image>
									</view>
									<view class="tui-pro-img">
										<image :src="item.pic_cover_mid" class="tui-pro-imgs" mode="widthFix" />
									</view>

									<view class="tui-pro-content">
										<view class="tui-pro-tit">{{ item.goods_name }}</view>
										<view>

											<view class="tui-pro-price">
												<view class="tui-sale-price">
											
													<view class="tui-sale-price-font">{{ item.promotion_price }}</view>
													<text class="tui-factory-price">¥{{ item.market_price }}</text>

												</view>
												<view class="yui-pro-stocks">
													销量:{{item.sales}}
												</view>
											</view>

										</view>
									</view>
								</view>

							</block>
						</view>
					</view>
				</view>
				<!--加载loadding-->
				<view v-if="productList==''">
					<tui-no-data :fixed="false" imgUrl="/static/images/nodata/nodata.png">暂无数据</tui-no-data>
				</view>
				<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
				<tui-nomore v-if="!pullUpOn && isList" backgroundColor="#f7f7f7"></tui-nomore>
			</template>


		</tui-sticky>






	</view>
</template>
<script>
	import tabNav from '@/components/tabNav.vue';
	export default {
		components: {
			tabNav,
		},
		data() {
			return {
				item: {
					category_id: ''
				},
				topHeight: '',
				indexs: 0,
				index: 1,
				height: 64, //header高度
				scrollH: 0, //滚动总高度
				top: 31, //标题图标距离顶部距离
				opcity: 0,
				iconOpcity: 0.5,
				current: 0,
				hotSearch: [],
				searchKey: '', //搜索关键词
				scrollInto: '',
				banner: [],
				category_id: 106,
				istrue: true,
				backgroundColor: "linear-gradient(-90deg, #ED6732, #E33E13)",
				type: '',
				scrollTop: 0,
				banners: [],
				showSkeleton: true, //骨架屏显示隐藏
				productList: [],
				tabIndex: 0,
				category: [],
				noticeList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				cateList: [],
				tabBars: [],
				cateId: 4465,
				drawer: false,
				drawerH: 0, //抽屉内部scrollview高度
				selectedName: '价格',
				selectH: 0,
				dropdownList: [{
						name: '价格升序',
						selected: false
					},
					{
						name: '价格降序',
						selected: false
					}
				],
				priceSort: 0,
				is_tj: 1,
				sales: 0,
				bgcolor: "#ffffff00"
			};
		},
		onShow() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			this.currentTab = 0;
			this.init();
			if (uni.getSystemInfoSync().statusBarHeight) {
				//吸顶效果 - 除了H5
				this.topHeight = uni.getSystemInfoSync().statusBarHeight + 44;
			} else {
				//吸顶效果 - H5
				this.topHeight = 44
			}
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight +
							44;
						this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6;
						this.scrollH = res.windowWidth;
					}
				});
			}, 0);

		},
		methods: {
			curls(e) {
				uni.navigateTo({
					url: '../productList/productList?category_id=' + e
				});
			},
			clickItem(item) {
				this.index = 1

				this.item.category_id = item.category_id + ""
				this.cateId = item.category_id
				// this.$refs.myChildComponent.init(this.item.category_id, 1);
				this.getList();
			},
			getIndex(index) {
				this.indexs = index
			},
			init() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					id: 4
				};
				//banner 
				let banner = this.tui.request('goods', 'post', datas, 1000, 1, '', 'banner');
				Promise.resolve(banner).then((value) => {
					if (value.code == 200) {
						this.banner = value.data.adv_list;
					}
				})

				/* 二级分类 */
				let cateList = this.tui.request('goods', 'post', {
					"token": token,
					"pid": 2
				}, 1000, 1, '', 'goodsCategory');
				Promise.resolve(cateList).then((value) => {
					if (value.code == 200) {
						this.cateList = value.data
					}
				})
				this.getList();
			},
			getList() {
				/* 获取默认商品类目产品 */
				this.pageIndex = 1;
				let token = this.tui.getToken();
				let datas = {
					is_tj: this.is_tj,
					price: this.priceSort,
					sales: this.sales,
					page: this.pageIndex,
					limit: 10,
					category_id: this.cateId
				};
				let products = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');

				Promise.resolve(products).then((value) => {

					if (value.code == 200) {
						if (value.data.data) {
							this.pageIndex = this.pageIndex + 1;
							this.productList = value.data.data;
						}
						this.skeletonShow = false
					} else {
						this.tui.toast(value.message);
					}
				})

			},

			detail: function(goods_id) {
				uni.navigateTo({
					url: '../productDetail/productDetail?goods_id=' + goods_id + '&type=1'
				});
			},
			more: function(e) {
				uni.navigateTo({
					url: "../productList/productList?category_id=" + e
				})
			},
			categorys: function(e) {
				uni.navigateTo({
					url: '../productList/productList?category_id=' + e
				});
			},
			search: function() {
				uni.navigateTo({
					url: '../search/search'
				});
			},
			back: function() {
				if (this.drawer) {
					this.closeDrawer();
				} else {
					uni.navigateBack();
				}
			},
			btnDropChange: function(e) {
				let index = e.currentTarget.dataset.index;
				let arr = JSON.parse(JSON.stringify(this.attrArr[index].list));
				if (arr.length === 0) {
					this.btnCloseDrop();
					this.$set(this.attrArr[index], 'isActive', !this.attrArr[index].isActive);
				} else {
					this.attrData = arr;
					this.attrIndex = index;
					this.dropScreenShow = true;
					this.$set(this.attrArr[index], 'isActive', false);
					this.scrollTop = 1;
					this.$nextTick(() => {
						this.scrollTop = 0;
					});
				}
			},
			btnSelected: function(e) {
				let index = e.currentTarget.dataset.index;
				this.$set(this.attrData[index], 'selected', !this.attrData[index].selected);
			},
			reset() {
				let arr = this.attrData;
				for (let item of arr) {
					item.selected = false;
				}
				this.attrData = arr;
			},
			btnCloseDrop() {
				this.scrollTop = 1;
				this.$nextTick(() => {
					this.scrollTop = 0;
				});
				this.dropScreenShow = false;
				this.attrIndex = -1;
			},
			btnSure: function() {
				let index = this.attrIndex;
				let arr = this.attrData;
				let active = false;
				let attrName = '';
				//这里只是为了展示选中效果,并非实际场景
				for (let item of arr) {
					if (item.selected) {
						active = true;
						attrName += attrName ? ';' + item.name : item.name;
					}
				}
				let obj = this.attrArr[index];
				this.btnCloseDrop();
				this.$set(obj, 'isActive', active);
				this.$set(obj, 'selectedName', attrName);
			},
			showDropdownList: function() {
				this.selectH = 246;
				this.tabIndex = 0;
			},
			hideDropdownList: function() {
				this.selectH = 0;
			},
			dropdownItem: function(e) {
				let index = e.currentTarget.dataset.index;
				let arr = this.dropdownList;
				for (let i = 0; i < arr.length; i++) {
					if (i === index) {
						arr[i].selected = true;
					} else {
						arr[i].selected = false;
					}
				}
				this.dropdownList = arr;
				this.priceSort = index + 1
				this.getList()
				this.selectH = 0;
			},
			screen: function(e) {
				let index = e.currentTarget.dataset.index;
				this.hideDropdownList();
				this.btnCloseDrop();
				if (index == 0) {
					this.tabIndex = 0;
					this.sales = 0;
					this.is_tj = 1;
					this.priceSort = 0;
					this.getList()
				} else if (index == 1) {
					this.showDropdownList();
					this.tabIndex = 1;
					this.priceSort = 1;
					this.is_tj = 0;
					this.sales = 0;
					this.getList()
				} else if (index == 2) {
					this.tabIndex = 2;
					this.is_tj = 0;
					this.priceSort = 0;
					this.getList()
				} else if (index == 2) {
					this.isList = !this.isList;
				} else if (index == 3) {
					this.drawer = true;
				}
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.scrollTop = e.scrollTop
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
			this.bgcolor = e.scrollTop <= 0 ? "#ffffff00" : "#f26506"
		},
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			let token = this.tui.getToken();
			let datas = {
				is_tj: this.is_tj,
				price: this.priceSort,
				sales: this.sales,
				category_id: this.cateId,
				page: this.pageIndex,
				limit: 20
			};
			let result = this.tui.request('goods', 'post', datas, 1000, 1, '', 'goodsList');
			Promise.resolve(result).then((value) => {
				if (value.code == 200) {
					this.productList = this.productList.concat(value.data.data);
					this.pageIndex = this.pageIndex + 1;
					this.loadding = false;
				} else {
					this.tui.toast(value.message);
				}
			})
		}
	};
</script>
<style>
	page {
		background-color: #f9f8f8;
		/* width: 100%;
		min-height: 100%;
		display: flex; */
	}

	.yui-hots-img {
		margin-top: 20rpx;
		width: 60rpx;

	}
	

	.yui-hot-title {
		align-items: center;
		flex-direction: row;
		display: flex;
		margin-left: 20rpx;
	}

	.yui-hot-title-left {
		font-weight: bold;
		text-align: center;
		color: #333;
		font-size: 28rpx;
	}

	.yui-hot-title-right {
		margin-left: 10rpx;
		text-align: center;
		color: #999;
		font-size: 18rpx;
	}

	.top-bar {
		position: absolute;
		/* top: 50rpx; */
		padding-top: 60rpx;
		left: 0;
		width: 100%;
		z-index: 99;
		/* background:rgba(255,255,255,0.2); */
	}

	/*顶部下拉选择 综合*/

	.tui-dropdownlist {
		width: 100%;
		position: absolute;
		background-color: #fff;
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding-top: 10rpx;
		padding-bottom: 26rpx;
		left: 0;
		top: 82rpx;
		visibility: hidden;
		transition: all 0.2s ease-in-out;
		z-index: 999;
	}

	.tui-flex-list {
		display: flex;
		justify-content: space-between;
	}

	.tui-pro-img {
		width: 200rpx;
		height: 200rpx;
		padding: 20rpx;
		/* width: 100%; */
		display: block;
	}

	.tui-dropdownlist-show {
		visibility: visible;
	}

	.tui-dropdownlist-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* background-color: rgba(0, 0, 0, 0.6); */
		z-index: -1;
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}

	.tui-dropdownlist-item {
		color: #333;
		height: 70rpx;
		font-size: 28rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/*顶部下拉选择 综合*/

	.tui-drawer-box {
		width: 686rpx;
		font-size: 24rpx;
		overflow: hidden;
		position: relative;
		padding-bottom: 100rpx;
	}

	.tui-drawer-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 80rpx;
	}

	.tui-title-bold {
		font-size: 26rpx;
		font-weight: bold;
		flex-shrink: 0;
	}

	.white-arrow-left-bg {
		/* background:rgba(255,255,255,0.2); */
		width: 40rpx;
		border-radius: 50%;
		height: 40rpx;
	}

	.white-arrow-left {
		margin-top: 4rpx;
		width: 11px;
		height: 16px;
		margin-left: 17px;
		font-weight: bold;
	}

	.nav-title {
		color: #000;
		position: absolute;
		font-size: 17px;
		font-weight: 600;
		top: 30px;
		left: 50%;
		line-height: 17px;
		margin-left: -34px;
	}

	.yui-banners-img {
		width: 100%;
	}

	.tui-mtop {
		/* font-weight: bold; */
		text-align: center;
		display: flex;
		/* justify-content: center; */
		/* margin-top: 20rpx; */

		margin-bottom: 20rpx;
	}

	.container {
		color: #333;
		width: 100%;
	}

	.yui-banners {
		margin-top: 70rpx;
		padding: 20rpx;
		margin-bottom: -130rpx;
	}

	.yui-notice {
		display: flex;
		justify-content: left;
		padding: 12rpx 20rpx 6rpx 20rpx;
		background: rgba(139, 175, 238, 0.2);

		box-shadow: 1rpx 1rpx 6rpx #ebebeb;
		margin: 0rpx 20rpx 20rpx 20rpx;
		border-radius: 80rpx;

	}

	.yui-notice-icon-bg {
		margin-top: 4rpx;

		text-align: center;
	}

	.yui-red-popbox-content-fot {
		display: block
	}

	.yui-pro-quan {
		font-size: 24rpx;
		color: #d64515;
		display: flex;
		justify-content: space-between;

	}

	.product-tips-imgs {
		/* /* position: absolute; */
		right: 16rpx;
		width: 25rpx;
		height: 60rpx;
		top: 4rpx;
		left: 6rpx;
		/* height:25rpx; */
		/* 	z-index: 10; */
	}

	.tui-animation {
		-webkit-animation: tui-rolling 12s linear infinite;
		animation: tui-rolling 12s linear infinite;
	}

	.yui-pro-red {
		position: absolute;
		top: -46rpx;
		right: 10rpx;
		color: #577896;
	}

	.yui-tops {
		position: fixed;
		color: #fff;
		font-size: 24rpx;
		padding-left: 40rpx;
		line-height: 80rpx;
		top: 0rpx;
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
		height: 80rpx;
		z-index: 999;
	}

	.hot-banner-img {
		position: relative;
		width: 100%;
	}

	.hot-banners-height {
		height: 160rpx;
	}

	.hot-banner-title {
		top: 0rpx;
		left: 0rpx;
		position: absolute;
	}

	.hot-banner-box {
		display: flex;
		justify-content: space-around;
	}

	.hot-banner-news {
		width: 23%;
		text-align: center;
		border-radius: 6px;
	}

	.hot-banner {
		width: 45.5%;
		border-radius: 12upx;
		background-size: 100%;
		background-size: cover;
		position: relative;
		margin-right: 14rpx;
	}

	.hot-banners {
		width: 54.5%;
	}

	.hot-banners-block {
		border-radius: 10rpx;
		background-size: cover;
		position: relative;
		/* background: url("../../static/images/common/food2.png"); */
		/* height: 149rpx; */
	}

	.hot-banners-block:first-child {
		margin-bottom: 4rpx;
	}

	.tui-scorll-view {
		flex: 1;
		line-height: 80rpx;
		width: 84%;
		white-space: nowrap;
		overflow: hidden;
		color: #ffffff;
	}

	.yui-notice-icon {
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;

	}

	.yui-red-popbox {
		background: linear-gradient(180deg, #5e89ff, #78c1f8);
		width: 500rpx;
		/* min-height: 470rpx; */
		padding-bottom: 60rpx;
		color: #fff;
		border-radius: 20px;
		z-index: 1000;
	}

	.yui-notice-popbox-close {
		right: 43%;
		bottom: -100rpx;
		z-index: 1000;
		position: absolute;
	}

	.yui-red-popbox-title {
		text-align: center;
		font-size: 30rpx;
		padding-top: 60rpx;
		color: #fff;
		font-weight: bold;
	}

	.yui-red-popclose {
		width: 64rpx;
		height: 64rpx;
	}

	.yui-red-popbox-content {
		padding: 40rpx;
		font-size: 26rpx;
		line-height: 50rpx;
	}

	.yui-red-popbox-button {
		background: linear-gradient(240deg, #8c17f1, #3172ff 0, #3aaaff 100%);
		color: #fff;
		width: 200rpx;
		padding: 20rpx;
		border-radius: 40rpx;
		font-size: 26rpx;
		text-align: center;
		margin: 0 auto;
	}

	.tui-tabs {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #fafafa;
	}

	.yui-spike-box-list {
		width: 100%;
		text-align: center;
		padding-top: 40rpx;
	}

	.yui-spike-box-spans-list {
		width: 100%;

	}

	.yui-spike-box-spans-list-img {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.yui-spike-box-spans-list-imgs {
		height: 150rpx;
		width: 100%;
	}

	.yui-spike-box-block-list-img {
		text-align: center;
	}

	.yui-spike-box-spans-list-dtitle {
		font-size: 24rpx;
		color: #999999;
	}

	.yui-spike-box-spans-list-padding {
		padding: 30rpx;
	}

	.yui-spike-box-spans-list-padding {
		padding: 30rpx;
	}

	.yui-spike-box-spans-list-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.yui-spike-box-spans {
		display: flex;
		justify-content: space-between;
	}

	.yui-spike-box-block-title {
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.yui-spike-box-block-dtitle {
		text-align: center;
		font-weight: bold;
		font-size: 24rpx;
		margin-top: 4rpx;
		color: #b1b1b1;
	}

	.yui-spike-box {
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		/* padding:30rpx; */
	}

	.yui-spike-box-line {
		border-left: 2rpx solid #eae9e9;
		height: 260rpx;
	}

	.yui-spike-box-block {

		border-top: 2rpx solid #eae9e9;
		display: flex;
		text-align: center;
		justify-content: space-around;
	}

	.yui-pro-stocks {
		font-size: 24rpx;
		color: #999;
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.yui-pro-block {
		position: absolute;
		background: #F24438;
		right: 20rpx;
		bottom: 14rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		text-align: center;
		/* width:100rpx; */
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 14rpx;
	}

	.self-img {
		width: 100%;
	}

	@-webkit-keyframes tui-rolling {
		0% {
			transform: translate3d(100%, 0, 0);
		}

		100% {
			transform: translate3d(-170%, 0, 0);
		}
	}

	@keyframes tui-rolling {
		0% {
			transform: translate3d(100%, 0, 0);
		}

		100% {
			transform: translate3d(-170%, 0, 0);
		}
	}

	.tui-scroll-h {
		width: 750rpx;
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.tui-line-h {
		/* #ifdef APP-PLUS */
		height: 1rpx;
		background-color: #cccccc;
		/* #endif */
		position: relative;
	}

	/*tabbar*/
	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background: #fff;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.tui-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.tui-tab-item-title-active {
		color: #5677fc;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom-width: 6rpx;
		border-style: solid;
		border-color: #5677fc;
		text-align: center;
	}

	.tui-acts-item {
		flex: 1;
		margin-right: 2%;
	}

	.kvbanner {
		padding: 0rpx 20rpx;
	}

	.tui-swiper-items {
		flex: 1 !important;
		flex-direction: row;
	}

	.tui-scroll-v {
		flex: 1;
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	.fqtcause {
		padding: 0rpx 20rpx;
	}

	.tui-acts-item:last-child {

		margin-right: 0;
	}

	.yui-actives-tits {
		font-size: 36rpx;
		font-weight: bold;
	}

	.yui-pro-img-block {
		position: relative;
	}

	.yui-popbox-block {
		min-width: 540rpx;
		width: 100%;
	}

	.tui-acts-box-block {
		margin-bottom: 20rpx;
		display: flex;
	}

	.yui-popimage {
		min-width: 540rpx;
		width: 100%;
	}

	.yui-red-popbox-close {
		right: 0rpx;
		top: 80rpx;
		z-index: 1000;
		position: absolute;
	}

	.yui-red-popbox-closes {
		right: -30rpx;
		top: -30rpx;
		z-index: 1000;
		position: absolute;
	}

	.yui-red-popimage {
		min-width: 660rpx;
		width: 100%;
	}

	.yui-red-popimages {
		min-width: 600rpx;
		width: 100%;
	}

	.yui-qrimg {
		width: 80%;
		position: absolute;
		left: 35%;
		bottom: 37.5%;
	}

	.yui-face-qrimg {
		width: 80%;
		position: absolute;
		left: 41%;
		bottom: 75.5%;
	}

	.yui-red-qr {
		position: absolute;
		/* min-width: 660rpx;
		width: 100%; */
		width: 39%;
	}

	.yui-red-face {
		position: absolute;
		/* min-width: 660rpx;
		width: 100%; */
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.good-goods {
		margin: 0rpx 20rpx 20rpx 20rpx;
		background: #fff;
		padding: 20rpx;
		border-radius: 8px;
	}

	.good-images {
		display: flex;
		margin-top: 15px;
		overflow-x: scroll;
	}

	.good-item[data-v-34c57316] {
		width: 74px;
		height: 74px;
		border-radius: 10px;
		margin-right: 10px;
	}

	.good-goods-title {
		display: flex;
		justify-content: space-between;
	}

	.good-goods .title {
		font-size: 16px;
		font-weight: 700;
		display: flex;

	}

	.good-goods .t1 {
		color: #ff2e37;
	}

	.good-goods .more {
		color: #888;
		display: flex;
		font-size: 28rpx;
	}

	.yui-img-tag {
		position: absolute;
		color: #fff;
		background: #e0b519;
		height: 40rpx;
		font-size: 22rpx;
		line-height: 40rpx;
		bottom: 0rpx;
		width: 100%;
	}

	.yui-img-tag-tis {

		padding-left: 10rpx;

	}

	.yui-pg-item {
		background: #fff;
		/* box-shadow: 0rpx 6rpx 2rpx rgba(0, 0, 0, .02); */
		/* margin: 20rpx; */
		padding: 40rpx 40rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.yui-pop-ptbutton {
		width: 70%;
		padding: 20rpx 10rpx;
		position: absolute;
		bottom: 260rpx;
		font-size: 24rpx;
		left: 80rpx;
		text-align: center;
		margin: 0 auto;
		color: #fff;
		background: #ffae2a;
		border-radius: 40rpx;
	}

	.yui-red-account {
		width: 70%;
		padding: 20rpx 10rpx;
		position: absolute;
		bottom: 450rpx;
		font-size: 32rpx;
		left: 80rpx;
		text-align: center;
		margin: 0 auto;
		color: #fff;
	}

	.yui-red-money {
		width: 70%;
		padding: 20rpx 10rpx;
		position: absolute;
		bottom: 48.5%;
		font-weight: bold;
		font-size: 56rpx;
		left: 86rpx;
		text-align: center;
		margin: 0 auto;
		color: #ff5906;
	}

	.tui-header-fixed {
		left: 0;
		width: 100%;
		position: fixed;
		z-index: 900;
		top: 0;

	}

	.yui-pg-item-contain {
		display: flex;
		justify-content: left;
	}

	.yui-pg-foot-member {
		margin-left: 28rpx;
	}

	.yui-pg-foot-member-span {
		font-size: 20rpx;
	}

	.yui-tnums-button {

		/* padding: 4rpx 10rpx; */
		/* border: 2rpx solid #ff1505; */
		color: #ff1505;
		line-height: 40rpx;
		border-radius: 20px;
		font-size: 20rpx;
	}

	.yui-tuan-nums {
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;
		margin-top: 10rpx;

	}

	.yui-pro-tags {
		/* margin-top: 10rpx; */
		/* margin-bottom: 10rpx; */
		display: flex;
	}

	.yui-pro-tags-block {
		color: #fff;
		padding: 2rpx 6rpx;
		background: #9a8680;
		/* line-height: 10rpx; */
		font-size: 20rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
	}

	.model-ownshop {
		background: linear-gradient(180deg, #fff3e8 2%, #fff 38%);
	}

	.model-5 {
		padding: 12px;
		box-sizing: border-box;
		margin: 20rpx;
		border-radius: 8px;
		height: 231px;
		background: linear-gradient(180deg, #fff3f5, #fff3f5 2%, #fff 38%, #fff);
		margin-bottom: 10px;
	}

	.model-5 .line1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
	}

	.model-5 .model-title {
		font-size: 16px;
		color: #333;
		font-weight: 700;
		margin-right: 15px;
	}

	.tui-searchbox {
		width: 96%;

		height: 30px;
		margin: 0rpx auto 0 auto;
		/* margin-right: 30rpx; */
		border-radius: 15px;
		font-size: 12px;
		background: #f7f7f7;
		padding: 3px 10px;
		box-sizing: border-box;
		color: #999;
		display: flex;
		align-items: center;
		overflow: hidden;

	}

	.model-5 .more {
		font-size: 14px;
		color: #888;
		display: flex;
		align-items: center;
	}

	.model-5 .line2-list {
		display: flex;
		justify-content: space-between;
	}

	.model-5 .line2 {
		width: 106px;
	}

	.model-5 .line2-img {
		width: 106px;
		height: 106px;
		border-radius: 8px;
	}

	.model-5 .title {
		font-size: 12px;
		color: #000;
		margin: 8px 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.model-5 .price-wrap {
		display: flex;
		align-items: center;
	}

	.yui-picture {
		position: relative;
	}

	.yui-tuan-pricebox {
		font-size: 30rpx;
		margin-top: 6rpx;
	}

	.yui-normal-tuan-price {
		font-size: 36rpx;
	}

	.tui-swiper-box {
		flex: 1 !important;
		/* #ifdef H5 */
		margin-top: 80rpx;
		/* #endif */
	}

	.yui-pro-img {
		width: 220rpx;
		border-radius: 14rpx;
	}

	.yui-pro-img-disabled {
		opacity: 0.7;
	}

	.yui-it {
		font-size: 14rpx;
	}

	.tui-active-box {
		margin: 0 20rpx;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-active {
		color: #e41f19;
	}

	.yui-pg-item-box {
		margin-left: 20rpx;
		width: 100%;
	}

	.yui-pg-foot-number {
		font-size: 24rpx;
		color: #fff;
		height: 40rpx;
		background: #dae2e3;
		border-radius: 8rpx;
		margin-top: 4rpx;
		;
		padding: 0rpx 10rpx;
		line-height: 40rpx;

	}

	.yui-pg-foot {

		display: flex;
		justify-content: space-between;
		/* background:#dde5e7; */
		padding: 10rpx;
		margin-top: 8rpx;
	}

	.yui-ptbutton {
		position: absolute;
		right: 20rpx;
		bottom: 25rpx;
		padding: 10rpx 10rpx;
		background: linear-gradient(to right, #ff6811, #ff1505);
		border-radius: 4px;
		font-size: 20rpx;
	}

	.yui-ptbutton-grey {
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
		padding: 10rpx 10rpx;
		background: #d8d6d6;
		border-radius: 4px;
		font-size: 20rpx;
	}

	.yui-pg-num {
		background: #ffbe18;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #fff;
		padding: 2rpx 16rpx
	}

	.tui-qdbanner-img {
		width: 100%;
	}

	.yui-pg-item-box-title {
		display: flex;
		justify-content: left;
	}

	.yui-pg-title {
		font-size: 28rpx;
		font-weight: bold;
		padding-left: 16rpx;
		height: 40rpx;
		width: 60%;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		color: #333;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.yui-pg-price-nums {
		margin-left: 6rpx;
		display: flex;
		justify-content: left;
	}

	.yui-normal-tuan-samll-price {
		font-size: 30rpx;
	}

	.tui-tuan-pro-price {
		font-size: 34rpx;
		display: flex;
		color: #ff1505;
		font-weight: bold;
	}

	.yui-pg-prices-cprice {
		color: #ffad10;
		margin-top: 20rpx;
		display: flex;
		justify-content: left;
	}

	.yui-pg-now-num {
		display: block;
		border-radius: 40rpx;
		font-size: 24rpx;
		border: 1px solid #FF6363;
		padding: 6rpx 10rpx;
		margin-bottom: 20rpx;
		color: #FF6363;
		text-align: center;
	}

	.yui-pg-item-price-info {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 40rpx;
	}

	.yui-pg-now-buy {
		background: linear-gradient(to right, #ff6811, #ff1505);
		border-radius: 8rpx;
		font-size: 26rpx;
		padding: 14rpx 30rpx;
		text-align: center;
		color: #fff;
		float: right;
		/* margin-top: 10rpx; */
	}

	.yui-pg-foot-member {
		display: flex;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #9c9c9c;
		justify-content: left;
	}

	.yui-pg-foot-member-avator {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		margin-left: -34rpx;
		margin-right: 10rpx;
	}


	.yui-pg-foot-number {
		font-size: 24rpx;
		color: #fff;
		height: 40rpx;
		background: #dae2e3;
		border-radius: 8rpx;
		margin-top: 4rpx;
		;
		padding: 0rpx 10rpx;
		line-height: 40rpx;

	}

	.product-banner {
		width: 100%;
	}

	.yui-location {
		color: #fff;
		display: flex;
		width: 140rpx;
	}

	.tui-product-list-block {
		background: #fff;
		border-radius: 10rpx;
		margin: 0rpx 0rpx 50rpx 0rpx;
	}

	.tui-location-arrow {
		margin-left: -10rpx;
		margin-top: -10rpx;
	}

	.yui-pg-price-nums {
		font-size: 40rpx;
	}

	.yui-qiandao {
		width: 100rpx;
		margin: 0 auto;
		margin-left: 20rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
	}

	.view-screen {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		/* position: fixed; */
		margin-bottom: 20rpx;
		z-index: 1000;
	}

	.tui-screen-top,
	.tui-screen-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #333;
	}

	.tui-screen-top {
		height: 82rpx;
		position: relative;
		background: #fff;
	}

	.tui-top-item {
		height: 28rpx;
		line-height: 28rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-topitem-active {
		color: #e41f19;
	}

	.tui-screen-bottom {
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		align-items: center;
		overflow: hidden;
	}

	.tui-bottom-text {
		line-height: 26rpx;
		max-width: 82%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.yui-qiandao-icon {
		width: 40rpx;
	}

	.yui-banner-ads {
		box-shadow: 1rpx 1rpx 6rpx #ebebeb;
		margin: 20rpx 20rpx 0rpx 20rpx;
		border-radius: 16rpx;
	}

	.yui-banner-imgs {
		border-radius: 20rpx;
		width: 100%;

	}

	.yui-tuan {
		width: 36rpx;
		margin-top: 5rpx;
	}

	.yui-normal-price {
		font-size: 26rpx;
		font-weight: bold;
	}

	.tui-group-name-title {
		font-size: 32rpx;
		text-align: left;
		/* line-height: 30rpx; */
		padding-left: 10rpx;
	}

	.tui-group-name-mystore {
		display: flex;
		line-height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 22rpx;
		font-size: 22rpx;
		font-weight: normal;
	}

	.yui-popclose {
		margin-top: 40rpx;
		width: 46rpx;
	}



	.tui-group-name-mystores {
		margin-right: 20rpx;
		/* margin-top: 23rpx; */
		border-radius: 30rpx;
		border: 2rpx solid #ffffff;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		line-height: 40rpx;
		height: 40rpx;
		font-size: 22rpx;
		font-weight: normal;
	}

	.yui-popbox {
		margin-top: 500rpx;
		position: relative;

		z-index: 10000;
	}

	.yui-red-popbox {
		margin-top: 300rpx;
		position: relative;

		z-index: 10000;
	}

	.tui-news-item {
		line-height: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.yui-normal-samll-price {
		font-size: 20rpx;
	}

	.yui-notice-line {
		height: 50rpx;
		margin-left: 20rpx;
		width: 10rpx;
		background-color: #ecebeb;
	}

	.yui-notice-box {
		font-size: 24rpx;
		color: #848484;
		padding-left: 20rpx;
		line-height: 30rpx;
		margin-top: 6rpx;
		width: 70%;
	}

	.yui-block-icon {
		margin-left: 20rpx;
		margin-top: 22rpx;
		width: 40rpx;
	}

	.floor-list {
		white-space: nowrap;
	}

	.scoll-wrapper {
		display: flex;
		align-items: flex-start;
	}

	.tui-group-name-tabs {
		margin: 30rpx 0 20rpx 0;

		width: 100%;
	}

	.tui-pro-pt-img {
		width: 140rpx;
		height: 300rpx;
		border-radius: 10rpx;
		display: block;
	}



	.tui-sale-price {
		font-size: 30rpx;
		font-weight: 500;
		display: flex;
		color: #e41f19;
	}
	.tui-sale-price-font{
		font-size: 40rpx;
		font-weight: bold;
		font-weight: 500;
		display: flex;
		color: #e45219;
	}

	.tabNav {
		margin-top: 100rpx;
	}

	.yui-pintuan-block-price {
		color: #e41f19;
		font-weight: bold;
		display: flex;
		font-size: 26rpx;
		justify-content: left;
	}

	.yui-price-normals {
		justify-content: left;
		display: flex;
	}

	.model-4 .imgs {
		width: 21px;
		height: 21px;
	}

	.mb20 {
		margin-bottom: 60rpx;
	}

	.yui-pricebox {
		font-size: 22rpx;
		font-weight: bold;
		padding-top: 8rpx;
		color: #e41f19;
	}

	.yui-hot {
		background: #fff;
		margin: 0rpx 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 1rpx 1rpx 4rpx #ebebeb;
		padding: 20rpx 20rpx;


	}

	.yui-pintuan {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}

	.yui-pintuan-block {
		background: #fff;

		width: 100%;
		margin: 0 12rpx 0 0rpx;
		/* box-shadow: 1rpx 1rpx 4rpx #ebebeb; */
	}

	.yui-pintuan-block-img {
		border-radius: 10rpx;
		padding: 20rpx 0;
		width: 100%;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		/* background:#bfbfbf; */
		height: 100rpx;
	}

	.yui-block-none {
		width: 6%;
	}

	.yui-block-img {
		width: 100%;
	}

	.yui-common-tit {
		padding-bottom: 20rpx;
	}

	.yui-comms-notice {
		font-size: 20rpx;
		padding-top: 10rpx;
		color: #aaa9a7
	}

	.yui-notice-icon-bg {

		/* padding: 2rpx; */
		padding-top: 2rpx;
		text-align: center;
		width: 34rpx;
	}

	.yui-notice-icon {
		margin-top: 8rpx;
		width: 38rpx;
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.model-4 {
		display: flex;
		margin: 100rpx 10rpx 5px 20rpx;
		margin: 0 auto;
		width: 94%;
		justify-content: space-between;
	}

	.card-4 {
		width: 67px;
		height: 67px;

		background: #fff;
		border-radius: 8px;
		padding: 5px 8px;
		box-sizing: border-box;
	}

	.model-4 .card-4 .title {
		font-size: 12px;
		color: #333;
		font-weight: 700;
	}

	.model-4 .card-4 .sub-title {
		font-size: 11px;
		color: #888;
	}

	.model-4 .card-4 .img-wrap {
		display: flex;
		margin-top: 3px;
		justify-content: flex-end;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.yui-notice-swiper {
		font-size: 24rpx;
		height: 40rpx;
		flex: 1;

	}

	.yui-notice-swiper-item {
		display: flex;
		align-items: center
	}

	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
		height: 80rpx;
	}

	.tui-ptop-4 {
		padding-top: 4rpx;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}

	.tui-item-active {
		color: #e41f19 !important;
	}

	/*tabbar*/
	.tui-header {
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to right, #8BAFEE, #528BE6);
		display: flex;
		align-items: center;
		justify-content: space-between;

		z-index: 999;
	}

	.tui-rolling-search {
		width: 100%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-category {
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0;
		margin-right: 22rpx;
		flex-shrink: 0;
	}

	.tui-category-scale {
		transform: scale(0.7);
		line-height: 24rpx;
	}

	.tui-icon-category {
		line-height: 20px !important;
		margin-bottom: 0 !important;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-header-banner {
		width: 100%;
		box-sizing: border-box;
		background: linear-gradient(to right, #f0f2f2, #f0f2f2);
	}



	.tui-banner-bg {
		display: flex;
		height: 440rpx;
		/* background: linear-gradient(to right, #f2efea, #f2efea); */
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 224rpx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		background: linear-gradient(bottom, #8BAFEE, #528BE6);
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}

	.tui-banner-box {
		width: 100%;
		box-sizing: border-box;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 440rpx;
		/* border-radius: 12rpx; */
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-slide-image {
		width: 100%;
		height: 280rpx;
		display: block;
	}

	/* #ifdef MP-WEIXIN */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background-color: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background-color: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background-color: #fff;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */
	.yui-notice {


		/* border-right: 2rpx solid #eaeaea; */
		/* box-shadow: 1rpx 1rpx 6rpx #ebebeb; */
		margin: 10rpx 20rpx 0rpx 20rpx;
		/* border-radius: 16rpx; */
		padding: 10rpx 20rpx 10rpx 20rpx;
		display: flex;
	}

	.tui-product-category {
		background: #fff;
		padding: 20rpx 0rpx 10rpx 0rpx;
		margin: 30rpx 20rpx 0rpx 20rpx;
		box-shadow: 1rpx 1rpx 20rpx #ebebeb;
		border-radius: 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #7e7e7e;
		height: 280rpx;
	}

	.tui-category-item {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-bottom: 16rpx;
		/* padding-top: 30rpx; */
	}

	.tui-category-img {
		height: 66rpx;
		width: 66rpx;
		display: block;
	}


	.tui-category-name {
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		line-height: 24rpx;
	}

	.tui-product-box {
		margin-top: 0rpx;
		padding: 0 20rpx;
		box-sizing: border-box;

	}

	.tui-product-box-block {
		background: #eae8e8;
		padding: 0rpx 0;
		margin-bottom: 20rpx;
		border-radius: 16rpx;

		color: #fff;
	}

	.tui-pb-20 {
		padding-bottom: 20rpx;
	}

	.tui-bg-white {
		background-color: #fff;
	}

	.tui-group-name1 {
		position: relative;
		background-size: 100%;
		text-align: center;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		font-weight: bold;
		display: flex;
		color: #333333;
	}

	.fqtcause-text {
		font-weight: bold;
		color: #333333;
	}



	.tui-activity-box {
		display: flex;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-activity-img {
		width: 100%;
		display: block;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 200rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24rpx;
	}

	.tui-new-title {
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-new-price {
		padding-top: 18rpx;
	}

	.tui-new-present {
		color: #ff201f;
		font-weight: bold;
	}

	.tui-new-original {
		display: inline-block;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-new-img {
		width: 160rpx;
		height: 160rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-product-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}

	.tui-product-lists {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}

	.tui-product-container {

		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex: 1;

	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
        position: relative;
		background: #fff;
		box-sizing: border-box;
		border-radius: 10rpx;
		/* box-shadow: 3rpx 6rpx 10rpx rgba(0, 0, 0, .04); */
		margin-bottom: 20rpx;
	}
	.tui-pro-top{
		position: absolute;
		left:0rpx;
		top:0rpx;
		color:#fff;
		/* background:url("/static/images/common/mlevel.png") no-repeat; */
		background-size: 100;
		width:60rpx;
		height: 60rpx;
		z-index: 100;
	}
	.tui-pro-top-number{
		position: absolute;
		left:0rpx;
		top:0rpx;
		text-align: center;
		color:#fff;
		line-height: 70rpx;
		font-size: 24rpx;
		z-index: 1000;
		width:60rpx;
		height: 60rpx;
	}
	.tui-pro-top-img{
		position: absolute;
		left:0rpx;
		height: 0rpx;
		width:60rpx;
		height: 60rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 20rpx 20rpx 8rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		height: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;

		/* margin-bottom: 24rpx; */
	}

	.tui-pro-price {
		display: flex;

		justify-content: space-between;
		color: #e41f19;
		/* margin-bottom: 10rpx; */

		padding-top: 18rpx;
	}



	.tui-factory-price {
		font-size: 24rpx;

		color: #a0a0a0;
		margin-top:14rpx;
		margin-left: 10rpx;
		font-weight: normal;
		text-decoration: line-through;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.scroll-view_H {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

	.view-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}

	.scroll-view-box {
		display: inline-block;
		width: 105px;
		height: 100%;
		margin-right: 6px;
	}

	.scroll-view-item_H {
		width: 105px;
		height: 100%;
	}

	.scramble-box {
		position: fixed;
		top: -60px;
		width: 300px;
		height: auto;
		border-radius: 16px 16px 0px 0px;
		background: #FFFFFF;
	}

	.scramble-box-img {
		overflow: hidden;
		width: 100%;
		height: 125px;
		border-radius: 16px 16px 0px 0px;
	}

	.scramble-box-text {
		width: 100%;
		border-radius: 0px 0px 16px 16px;

	}

	.scramble-text-a {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		line-height: 22px;
		text-align: center;
	}

	.scramble-text-b {
		margin-top: 6px;
		margin-left: 35px;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		line-height: 18px;
	}

	.scramble-text-c {
		margin-top: 12px;
		margin-left: 30px;
		font-size: 10px;
		font-weight: bold;
		color: #FF5622;
		line-height: 18px;
	}

	.scramble-button {
		margin-top: 6px;
		margin-bottom: 25px;
		width: 115px;
		height: 30px;
		background: #FF5622;
		border-radius: 15px;
		font-size: 14px;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
	}


	.fqtcause-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 180rpx;
	}

	.fqtcause-box-img {
		width: 346rpx;
		/* width: 345rpx; */
		height: 180rpx;
	}


	.tui-pro-imgs {

		width: 200rpx;
		height: 200rpx;
	}

	.view-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	.tui-icon-box {
		position: relative;
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.view {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/**
	 * 滚动水平左右滑动
	 */
	.scroll-view-horizontal {
		white-space: nowrap;
		box-sizing: border-box;
		width: 100%;
	}

	.wh-auto {
		width: 100% !important;
	}

	.top-nav-scroll {
		width: calc(100% - 70rpx);
	}

	.top-nav {

		height: 182rpx;
		top: 0;
		left: 0;
		z-index: 3;
	}

	/* .pa {
	    position: absolute;
	} */
	/**
	 * 滚动水平左右滑动内容宽度处理
	 */
	.rolling-horizontal .scroll-view-horizontal {
		width: calc(100% + 20rpx);
	}
</style>